@page "/DensityHeatmap_Chart"
@using OneOf
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Heatmap Config="config1" OnFirstRender="onChart1_FirstRender" />

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Heatmap @ref="@chart"/>
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    #region 示例1

    private async Task onChart1_FirstRender(IChartComponent chart)
    {
        var data1 = await DemoData.HeadMapDataAsync(NavigationManager, HttpClient);
        await chart.ChangeData(data1);
    }

    HeatmapConfig config1 = new HeatmapConfig()
    {
        HeatMapType = "density",
        XField = "g",
        YField = "l",
        ColorField = "tmp",
            Color = new string[] { "#F51D27", "#FA541C", "#FF8C12", "#FFC838", "#FAFFA8", "#80FF73", "#12CCCC", "#1890FF", "#6E32C2" },
        Legend = new MatrixLegendConfig()
        {
            Position = "bottom"
        },
        Annotation = new []
        {
            new ImageAnnotation()
            {
                Start = new[]{"min","max"},
                End = new[]{"max","min"},
                Src = "https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png"
            }
        }
    };


    #endregion 示例1

}

